<template>
  <div class="list">
    <ul>
      <li v-for="(item, index) in carStore.listArr" :key="index">
        <img :src="item.pic"></img>
        <div class="name">{{ item.name }}</div>
        <p>{{ item.desc }}</p>
        <div class="price">
          <p>{{ item.price }}</p>
          <button @click="addCar(item)">加入购物车</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useCarStore } from '../store/car';
// const arr = reactive([
//   {
//     pic: 'https://img0.baidu.com/it/u=3664559370,4167784460&fm=253&fmt=auto&app=138&f=JPEG?w=823&h=800',
//     name: '无线蓝牙耳机',
//     price: 100,
//     desc: '高清音质 持久续航'
//   },
//   {
//     pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01kT1RqH1xeqow7dlGT_%21%212208418306469-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1737114845&t=62fa6ec91546fa59b6f5eb71665fce06',
//     name: '智能手表',
//     price: 599,
//     desc: '多功能运动监测'
//   },
//   {
//     pic: 'https://img2.baidu.com/it/u=2406623817,3374856095&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
//     name: '便携音响',
//     price: 399,
//     desc: '环绕立体声'
//   },
//   {
//     pic: 'https://img2.baidu.com/it/u=402051968,367416785&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
//     name: '移动电源',
//     price: 199,
//     desc: '大容量快充'
//   },
// ])

const carStore = useCarStore()

const addCar = (item) => {
  carStore.addSelectArr(item)  // 调用仓库的方法
}

</script>

<style lang="css" scoped>
.list ul{
  list-style: none;
  display: flex;
  justify-content: space-around;
}
.list ul li{
  width: 294px;
  background-color: #ffffff4e;
  box-shadow: 0 0 10px;
}
img{
  width: 100%;
  height: 294px;
  
}
.name{
  width: 100%;
  margin: 16px;
  color: black;
  font-weight: 18px;
}
.list ul li p{
  width: 100%;
  font-weight: 16px;
  color: #6B7280;
  margin: 0 16px 16px 16px;
}
.price{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 6px 16px;
  box-sizing: border-box;
}
</style>